<template>
	<view class="account">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view v-if="showBank == 1" class="card no-bind" style="background-color: #fe525e;" @click="goForm(1)">
			<view class="icon">
				<u-image :src="imgHost+'/static/images/wallet/icon-bank.png'" width="60" height="60"></u-image>
			</view>
			<view class="info">
				<view class="top">
					<text class="name">储蓄卡</text>
					<text class="btn" v-if="payment_bank" @click="unbind(1)">解除绑定</text>
				</view>

				<view v-if="payment_bank">
					<view class="desc">{{payment_bank.pay_account}}</view>
					<view class="account-num">{{payment_bank.pay_card_id}}</view>
				</view>

				<view class="desc" v-if="!payment_bank">
					账号未绑定
				</view>
			</view>
		</view>


		<view v-if="showWechat == 1" class="card no-bind" style="background-color: #23c107;" @click="goForm(3)">
			<view class="icon"><u-icon name="weixin-fill" color="#23c107" size="60"></u-icon></view>
			<view class="info">
				<view class="top">
					<text class="name">微信支付</text>
					<text class="btn" v-if="payment_wx" @click="unbind(3)">解除绑定</text>
				</view>

				<view class="desc" v-if="payment_wx">
					{{payment_wx.member_name}}
					-
					{{payment_wx.wechat_account}}
				</view>

				<view class="desc" v-if="!payment_wx">
					账号未绑定
				</view>
			</view>
		</view>

		<view v-if="showAlipay == 1" class="card no-bind" style="background-color: #00aaff;" @click="goForm(2)">
			<view class="icon">
				<u-icon name="zhifubao-circle-fill" color="#17adda" size="60"></u-icon>
			</view>
			<view class="info">
				<view class="top">
					<text class="name">支付宝</text>
					<text class="btn" v-if="payment_alipay" @click="unbind(2)">解除绑定</text>
				</view>

				<view class="desc" v-if="payment_alipay">
					{{payment_alipay.member_name}}
					-
					{{payment_alipay.alipay_account}}
				</view>

				<view class="desc" v-if="!payment_alipay">
					账号未绑定
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '提现账户',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		loading: false,

		payment_bank: false,
		payment_wx: false,
		payment_alipay: false,

		showBank: 0,
		showWechat: 0,
		showAlipay: 0,
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getAccount();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getAccount() {
		state.showBank = 1;
		state.showWechat = 1;
		state.showAlipay = 1;
	}

	function goForm(type) {
		pageRoute('/userPages/wallet/withdraw-form?type=' + type);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		loading,
		payment_bank,
		payment_wx,
		payment_alipay,
		showBank,
		showWechat,
		showAlipay
	} = toRefs(state);
</script>

<style lang="scss">
	.account {
		padding: $m24;

		.card {
			display: flex;
			height: 230rpx;
			margin-bottom: $m24;
			padding: $m24;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: $radius-12;

			.icon {
				@include f-center;
				overflow: hidden;
				width: 130rpx;
				height: 130rpx;
				background-color: $u-bg-reverse-color;
				border-radius: $radius-circle;
			}

			.info {
				flex: 1;
				margin-left: $m24;

				.top {
					@include f-between;

					.name {
						font-size: $font-32;
						font-weight: bold;
						color: $u-reverse-color;
					}

					.btn {
						padding: 0.3em 1em;
						background-color: rgba(0, 0, 0, 0.5);
						font-size: $font-24;
						color: $u-reverse-color;
						border-radius: $radius-100;
					}
				}

				.desc {
					margin-top: $m8;
					font-size: $font-24;
					color: $u-reverse-color;
				}

				.account-num {
					margin-top: $m24;
					color: $u-reverse-color;
				}
			}

			&.no-bind {
				align-items: center;
			}
		}
	}
</style>